<template>
	<div>
		<!-- 转班详情 -->
		<div class="orders_changeclassDetials">
			<div class="row">
				<div class="txtbox">
					<span class="label">转班日期：</span>
					<span class="value">{{changeClassObj.changeDate}}</span>
				</div>
			</div>
			<div class="row" style="margin-top: 0.16rem;">
				<span class="title">原班信息</span>
			</div>
			<div class="row table">
				<div class="table" style="width:100%;">
					<template >
						<el-table
							:data="changeClassObj.oldClassData"
							stripe
							style="width: 100%;font-size:0.16rem;"
							>
							<el-table-column
							align="center"
							prop="className"
							label="班级名称">
							</el-table-column>
							<el-table-column
							align="center"
							prop="type"
							label="类型">
							</el-table-column>
							<el-table-column
							align="center"
							prop="state"
							label="状态">
							</el-table-column>
							<el-table-column
							align="center"
							prop="courseMoney"
							label="课程价格">
							</el-table-column>
							<el-table-column
							align="center"
							prop="realMoney"
							label="实际支付">
							</el-table-column>
							<el-table-column
							align="center"
							prop="totalCourseHour"
							label="总课时">
							</el-table-column>
							<el-table-column
							align="center"
							prop="useCourseHour"
							label="已上课时">
							</el-table-column>
							<el-table-column
							align="center"
							label="课耗">
								<template slot-scope="scope">
									<span>{{scope.row.useCourseMoney}}</span>
								</template>
							</el-table-column>
							<el-table-column
							align="center"
							prop="surplusMoney"
							label="剩余课程费用">
							</el-table-column>
							
						</el-table>
					</template>
				</div>
			</div>
			<div class="row" style="margin-top: 0.16rem;">
				<span class="title">新班信息</span>
			</div>
			<div class="row table">
				<div class="table" style="width:100%;">
					<template >
						<el-table
							:data="changeClassObj.newClassData"
							stripe
							style="width: 100%;font-size:0.16rem;"
							>
							<el-table-column
							align="center"
							prop="className"
							label="班级名称">
							</el-table-column>
							<el-table-column
							align="center"
							prop="type"
							label="类型">
							</el-table-column>
							<el-table-column
							align="center"
							label="上课时间">
								<template slot-scope="scope">
									<span>{{scope.row.startTime}} 至 {{scope.row.endTime}}</span>
								</template>
							</el-table-column>
							<el-table-column
							align="center"
							prop="teacherName"
							label="教师">
							</el-table-column>
							<el-table-column
							align="center"
							label="班级进度">
								<template slot-scope="scope">
									<span>{{scope.row.useCourseHour}}/{{scope.row.totalCourseHour}}</span>
								</template>
							</el-table-column>
							<el-table-column
							align="center"
							prop="unitPrice"
							label="课程单价">
							</el-table-column>
							<el-table-column
							align="center"
							prop="courseMoney"
							label="课程价格">
							</el-table-column>
							<el-table-column
							align="center"
							prop="buyNumber"
							label="购买数量">
							</el-table-column>
							<el-table-column
							align="center"
							prop="totalMoney"
							label="合计">
							</el-table-column>
						</el-table>
					</template>
				</div>
			</div>
			<!-- <div class="row line" style="margin-top: 0.3rem;"></div> -->
			<div class="row" style="margin-top: 0.25rem;">
				<span class="">转班需补齐课程差价，或是退还多余部分</span>
			</div>
			<div class="row" style="">
				<span class="">(课程差价 = 新班总费用 - 原班剩余课程费用)</span>
			</div>
			<div class="row">
				<div class="txtbox alignCenterBox" style="width:100%;font-size: 0.18rem;">
					<span class="label" v-if="shouldPayRefundMoney>=0">应支付：</span>
					<span class="label" v-else>应退费：</span>
					<span class="value" style="font-size: 0.26rem;
    				color: #fc7301;font-weight: 600;">￥{{Math.abs(shouldPayRefundMoney)}}</span>
				</div>
			</div>
			<div class="row">
				<div class="txtbox alignCenterBox" style="width:100%;font-size: 0.18rem;">
					<span class="label" v-if="shouldPayRefundMoney>=0">实际支付：</span>
					<span class="label" v-else>实际退费：</span>
					<span class="value" style="font-size: 0.26rem;
    				color: #fc7301;font-weight: 600;">￥{{Math.abs(changeClassObj.realPayRefundMoney)}}</span>
				</div>
			</div>
			<div class="row">
				<div class="txtbox alignCenterBox" style="width:100%;font-size: 0.18rem;">
					<span class="label">转班办理：</span>
					<span class="value">{{changeClassObj.operaterName}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import fNumber from "@/js/utils/floatnumber.js"
	let vm;
	export default{
		data(){
			return {
				changeClassObj:{
					changeDate:'',
					oldClassData:[
						{
							className:'',//班级名称
							type:'',//类型
							courseMoney:'',//课程价格
							realMoney:'',//实际支付
							totalCourseHour:'',//总课时
							useCourseHour:'',//已上课时
							unitPrice:'',//单价
							useCourseMoney:'',//课耗
							surplusMoney:'',//剩余课程费用
							state:'',//状态
						}
					],
					newClassData:[
						{
							className:'',//班级名称
							type:'',//类型
							startTime:'',//上课时间
							endTime:'',//上课时间
							teacherName:'',//教师
							useCourseHour:'',//已上课时--班级进度
							totalCourseHour:'',//总课时--班级进度
							unitPrice:'',//课程单价
							buyNumber:'',//购买数量
							courseMoney:'',//课程价格
							totalMoney:'',//合计
						}
					],
					
					realPayRefundMoney:0,
					operaterName:''
				},
				shouldPayRefundMoney_totalMoney:0,
				shouldPayRefundMoney_surplusMoney:0,
				shouldPayRefundMoney:0,
			}
		},
		methods:{
			/**初始化 */
			updateByData(data){
				let orderCourseId=data.orderCourseId;
				//支付信息
				this.changeClassObj.changeDate=data.time;
				this.changeClassObj.realPayRefundMoney=data.money;
				this.changeClassObj.operaterName=data.operater;
				//原班信息
				if(data.moneyType==1)
				{
					api.getExchangeOrderCourseInfo({orderCourseId:orderCourseId}).then(function(d){
						if(d.resultCode==2000){
							// debugger
							let classInfo=d.info||{};
							classInfo.coursePackage=classInfo.coursePackage||{};
							//课程类型
							let unit = "课时";
							let unitPrice = "";
							let unitPriceNumber=fNumber.divide(classInfo.coursePackage.totalMoney,classInfo.coursePackage.courseHour);
							if (classInfo.coursePackage.chargeMode == 3) {
								unit = tool.getDictNameByValue(
								classInfo.coursePackage.courseTimeMode,
								"course_time_mode"
								);
								unitPriceNumber=classInfo.coursePackage.totalMoney
								// Math.ceil(
								// 	(classInfo.coursePackage.totalMoney * 100) /
								// 	(classInfo.totalCourseHour||1)
								// ) / 100;
							} else {
								unitPrice =fNumber.divide(classInfo.coursePackage.totalMoney,classInfo.coursePackage.courseHour);
							}
							//双师课
							if(classInfo.courseType == 4) {
								unit = "节";
							}

							//原班合计
							let totalMoney=fNumber.multiply(classInfo.courseBuyNum,unitPriceNumber);
							//课耗
							let useCourseMoney=fNumber.parseNumber(classInfo.courseUseHour*unitPrice);
							if(useCourseMoney>classInfo.realMoney)useCourseMoney=classInfo.realMoney;
							//剩余费用
							let surplusMoney=fNumber.parseNumber(classInfo.realMoney-useCourseMoney);

							vm.shouldPayRefundMoney_surplusMoney=surplusMoney;
							vm.getShouldPayRefundMoney();
							vm.changeClassObj.oldClassData=[
								{
									className:classInfo.className,//班级名称
									type:unit,//类型
									courseMoney:totalMoney,//课程价格
									realMoney:classInfo.realMoney,//实际支付
									totalCourseHour:classInfo.courseHour,//总课时
									useCourseHour:classInfo.courseUseHour,//已上课时
									unitPrice:unitPrice,//单价
									useCourseMoney:useCourseMoney,//课耗
									surplusMoney:surplusMoney,//剩余课程费用
									state:tool.getDictNameByValue( classInfo.classStatusMode, "class_status_mode") || "",//状态 courseStatus
								}
							];
						}
						else{
							vm.$message({
								type:'warning',
								message:d.message||'操作失败！'
							});
						}
					});
					//新班信息
					api.getClassInfoByIdChange({ classId: data.classId }).then(function(d) {
						if (d.resultCode == 2000) {
							let classInfo = d.info;
							if (!classInfo.coursePackage) classInfo.coursePackage = {};
							//班级状态
							let classStatusModeName =
							tool.getDictNameByValue( classInfo.classStatusMode, "class_status_mode") || "";
							//课程类型
							let unit = "课时";
							let unitPrice = "";
							let unitPriceNumber=fNumber.divide(classInfo.coursePackage.totalMoney,classInfo.coursePackage.courseHour);
							if (classInfo.coursePackage.chargeMode == 3) {
								unit = tool.getDictNameByValue(
								classInfo.coursePackage.courseTimeMode,
								"course_time_mode"
								);
								unitPriceNumber=classInfo.coursePackage.totalMoney
								// Math.ceil(
								// 	(classInfo.coursePackage.totalMoney * 100) /
								// 	(classInfo.totalCourseHour||1)
								// ) / 100;
							} else {
								unitPrice =fNumber.divide(classInfo.coursePackage.totalMoney,classInfo.coursePackage.courseHour);
							}
							//双师课
							if(classInfo.courseType == 4) {
								unit = "节";
							}
							//收费模式
							// let chargeModeName = tool.getDictNameByValue(
							// 	classInfo.coursePackage.chargeMode,
							// 	"charge_mode"
							// );
							//老师
							let teacherObj = {};
							if (classInfo.teacherList && classInfo.teacherList.length > 0) {
								teacherObj = classInfo.teacherList[0];
							}
							vm.shouldPayRefundMoney_totalMoney=fNumber.multiply(data.buyNumber,unitPriceNumber);
							// vm.shouldPayRefundMoney_totalMoney=vm.shouldPayRefundMoney_totalMoney>classInfo.coursePackage.totalMoney?
							// classInfo.coursePackage.totalMoney:vm.shouldPayRefundMoney_totalMoney;

							vm.getShouldPayRefundMoney();
							vm.changeClassObj.newClassData = [{
								classId: classInfo.classId,
								className:classInfo.className,//班级名称
								type:unit,//类型
								startTime:classInfo.startTime,//上课时间
								endTime:classInfo.endTime,//上课时间
								teacherName:teacherObj.nickName,//教师
								useCourseHour:classInfo.useCourseHour,//已上课时--班级进度
								totalCourseHour:classInfo.totalCourseHour,//总课时--班级进度
								unitPrice:unitPrice,//课程单价
								buyNumber:data.buyNumber,//购买数量
								courseMoney:classInfo.coursePackage.totalMoney,//课程价格
								totalMoney:vm.shouldPayRefundMoney_totalMoney,//合计
							}];
						} else {
							vm.$message({
								type: "warning",
								message: d.message || "操作失败！"
							});
						}
					});
				}
				else
				{
					api.getExchangeOrderCourseInfo2({id:orderCourseId}).then(function(d){
						if(d.resultCode==2000){
							// debugger
							let classInfo=d.info||{};
							classInfo.coursePackage=classInfo.coursePackage||{};
							//课程类型
							let unit = "课时";
							let unitPrice = "";
							let unitPriceNumber=fNumber.divide(classInfo.coursePackage.totalMoney,classInfo.coursePackage.courseHour);
							if (classInfo.coursePackage.chargeMode == 3) {
								unit = tool.getDictNameByValue(
								classInfo.coursePackage.courseTimeMode,
								"course_time_mode"
								);
								unitPriceNumber=classInfo.coursePackage.totalMoney
								// Math.ceil(
								// 	(classInfo.coursePackage.totalMoney * 100) /
								// 	(classInfo.totalCourseHour||1)
								// ) / 100;
							} else {
								unitPrice =fNumber.divide(classInfo.coursePackage.totalMoney,classInfo.coursePackage.courseHour);
							}
							//双师课
							if(classInfo.courseType == 4) {
								unit = "节";
							}
							//原班合计
							let totalMoney=fNumber.multiply(classInfo.courseBuyNum,unitPriceNumber);
							//课耗
							let useCourseMoney=fNumber.parseNumber(classInfo.courseUseHour*unitPrice);
							if(useCourseMoney>classInfo.realMoney)useCourseMoney=classInfo.realMoney;
							//剩余费用
							let surplusMoney=fNumber.parseNumber(classInfo.realMoney-useCourseMoney);

							vm.shouldPayRefundMoney_surplusMoney=surplusMoney;
							vm.getShouldPayRefundMoney();
							vm.changeClassObj.oldClassData=[
								{
									className:classInfo.className,//班级名称
									type:unit,//类型
									courseMoney:totalMoney,//课程价格
									realMoney:classInfo.realMoney,//实际支付
									totalCourseHour:classInfo.courseHour,//总课时
									useCourseHour:classInfo.courseUseHour,//已上课时
									unitPrice:unitPrice,//单价
									useCourseMoney:useCourseMoney,//课耗
									surplusMoney:surplusMoney,//剩余课程费用
									state:tool.getDictNameByValue( classInfo.classStatusMode, "class_status_mode") || "",//状态 courseStatus
								}
							];
						}
						else{
							vm.$message({
								type:'warning',
								message:d.message||'操作失败！'
							});
						}
					});
					//新班信息
					api.getClassInfoByIdChange2({ studentCourseId: orderCourseId }).then(function(d) {
						if (d.resultCode == 2000) {
							let classInfo = d.info;
							if (!classInfo.coursePackage) classInfo.coursePackage = {};
							//班级状态
							let classStatusModeName =
							tool.getDictNameByValue( classInfo.classStatusMode, "class_status_mode") || "";
							//课程类型
							let unit = "课时";
							let unitPrice = "";
							let unitPriceNumber=fNumber.divide(classInfo.coursePackage.totalMoney,classInfo.coursePackage.courseHour);
							if (classInfo.coursePackage.chargeMode == 3) {
								unit = tool.getDictNameByValue(
								classInfo.coursePackage.courseTimeMode,
								"course_time_mode"
								);
								unitPriceNumber=classInfo.coursePackage.totalMoney
								// Math.ceil(
								// 	(classInfo.coursePackage.totalMoney * 100) /
								// 	(classInfo.totalCourseHour||1)
								// ) / 100;
							} else {
								unitPrice =fNumber.divide(classInfo.coursePackage.totalMoney,classInfo.coursePackage.courseHour);
							}
							//双师课
							if(classInfo.courseType == 4) {
								unit = "节";
							}
							//收费模式
							// let chargeModeName = tool.getDictNameByValue(
							// 	classInfo.coursePackage.chargeMode,
							// 	"charge_mode"
							// );
							//老师
							let teacherObj = {};
							if (classInfo.teacherList && classInfo.teacherList.length > 0) {
								teacherObj = classInfo.teacherList[0];
							}
							vm.shouldPayRefundMoney_totalMoney=fNumber.multiply(classInfo.courseHour,unitPriceNumber);
							// vm.shouldPayRefundMoney_totalMoney=vm.shouldPayRefundMoney_totalMoney>classInfo.coursePackage.totalMoney?
							// classInfo.coursePackage.totalMoney:vm.shouldPayRefundMoney_totalMoney;

							vm.getShouldPayRefundMoney();
							vm.changeClassObj.newClassData = [{
								classId: classInfo.classId,
								className:classInfo.className,//班级名称
								type:unit,//类型
								startTime:classInfo.startTime,//上课时间
								endTime:classInfo.endTime,//上课时间
								teacherName:teacherObj.nickName,//教师
								useCourseHour:classInfo.useCourseHour,//已上课时--班级进度
								totalCourseHour:classInfo.totalCourseHour,//总课时--班级进度
								unitPrice:unitPrice,//课程单价
								buyNumber:classInfo.courseHour||0,//购买数量
								courseMoney:classInfo.coursePackage.totalMoney,//课程价格
								totalMoney:vm.shouldPayRefundMoney_totalMoney,//合计
							}];
						} else {
							vm.$message({
								type: "warning",
								message: d.message || "操作失败！"
							});
						}
					});
				}
					
				
				
			},
			cancel(){
				this.$emit('hideMe');
			},
			success(){
				this.$emit('success');
			},
			getShouldPayRefundMoney(){
				this.shouldPayRefundMoney = fNumber.subtract(vm.shouldPayRefundMoney_totalMoney,vm.shouldPayRefundMoney_surplusMoney);
			}
		},
		mounted(){
			
		},
		computed:{
			
		},
		watch:{
			
		},
		created : function() {
			vm=this;
		}
	}
</script>

<style lang="scss">
	.orders_changeclassDetials{
		padding: 0 0.04rem 0.2rem 0.04rem;
		font-size: 0.16rem;
		// color: #333333;
		.row{
			width: 100%;
			display: flex;
    		margin-top: 0.1rem;
			.title{
				font-size: 0.18rem;
				color: #333333;
				font-weight: bold;
			}
			.otherinfo{
				font-size: 0.18rem;
				color: #333333;
				font-weight: bold;
			}
			.txtbox{
				width: 25%;
				.label{

				}
				.value{

				}
			}
			.alignCenterBox{
				.label{
					// width: 1.25rem;
					// text-align: right;
					// display: inline-block;
				}
			}
			.table{
				.el-table__header-wrapper{
					.el-table__header thead{
						color: #666666 !important;
						font-size: 0.16rem !important;
					}
				}
				.el-table__body-wrapper{
					.el-table__row{
						.cell{
							white-space: pre-line !important;
							font-size: 0.16rem !important;
						}
					}
					.cloumn-type{
						.type{
							display: block;
							height: 0.2rem;
							line-height: 0.2rem;
							font-size: 0.12rem;
							background-color: #3885F8;
							color: white;
							border-radius: 0.05rem;
							width: 0.35rem;
							padding: 0 0.05rem;
							text-align: center;
						}
					}
				}
			}
			.statisticsBox{
				width: 100%;
				text-align: right;
				font-size: 0.18rem;
				.primary{
					// font-size: 0.16rem;
				}
				.actual{
					.value{
						font-size: 0.26rem;
    					color: #fc7301;
						font-weight: 600;
						// color: red;
					}
				}
				.deposit{
					// font-size: 0.14rem;
				}
			}
		}
		.row.line{
			width: 100%;
			height: 1px;
			border-top: 0.005rem solid #6666667d;
		}
		.row.table{
			flex-wrap: wrap;
		}
		.editBtn{
			color: #3885F8;
			cursor: pointer;
		}
		// 滚动条
		.el-table__body-wrapper::-webkit-scrollbar {
			width: 0.05rem;
		}
		.el-table__body-wrapper::-webkit-scrollbar-thumb {
			border-radius: 0.5rem;
			background: #BBBBBB;
		}
		.el-table__body-wrapper::-webkit-scrollbar-track {
			background: #F2F6FC;
		}

		
	}
</style>